<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$title|default=''} </title>
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/plugs/web_edit/css/codemirror.min.css">
    <link rel="stylesheet" href="__ROOT__/static/plugs/web_edit/css/monokai.min.css">
    <link rel="stylesheet" href="__ROOT__/static/plugs/web_edit/css/stuyle_monokai.min.css">
    <link rel="stylesheet" href="__ROOT__/static/plugs/web_edit/css/self.css">
    <link rel="stylesheet" href="/node_modules/xterm/css/xterm.css" />


</head>
<body>


<div id="chatFrame" style="width: 4px;background-color: green;cursor: ew-resize">
    <img src="__ROOT__/static/plugs/web_edit/img/move.png" class="move-left">
    <img src="__ROOT__/static/plugs/web_edit/img/move-right.png" class="move-right" style="display: none">
</div>

<style>
    .code-area .layui-tab-item a {
        color: #d4d4d4;
    }
</style>

<div class="layui-row">
    <div class="layui-col-sm12" id="body-top">
        <div class="grid-demo">
            <a class="task-user-info" href="" target="_blank">
                <img width="35" height="35" src="{$userInfo.avatar}">
                <span>{$userInfo.nick_name}</span>
            </a>
            <h2 class="shixun-info">{$employ.title}<span> </span></h2>
            <input type="hidden" name="usr_vl" value="{$userInfo.id}">
        </div>
    </div>
    <div class="layui-col-sm5" id="index-left" style="height: 800px;overflow-y: auto;overflow-x: hidden;">
        <div class="layui-col-sm12 left-top-title">
            <div class="layui-col-sm1 left-logo" lay-on="test-offset-l">
                <img src="__ROOT__/static/plugs/web_edit/img/menu.png" >
            </div>

            <div class="layui-col-sm10 "><h3>{$employInfo.title|default="实战完毕"}</h3>
            </div>
            <div class="layui-col-sm1 left-icon">
                <a href="javascript:;" onclick="toMax()" id="to-max"> <i class="layui-icon layui-icon-screen-full" style="font-size: 30px; color: #1E9FFF;"></i></a>
                <a href="javascript:;" onclick="toMin()" id="to-min" style="display: none"> <i class="layui-icon layui-icon-screen-full" style="font-size: 30px; color: #1E9FFF;"></i></a>
            </div>
        </div>
        <div class="layui-col-sm12 layui-tab layui-tab-brief left-tab  ">

            <!-- <div class="layui-tab layui-tab-brief" >-->
            <ul class="layui-tab-title" id="code-edit">
                {foreach $tab_arr as $key => $title}
                <li  lay-id="aa-{$key}" {if $key eq 1} class="layui-this" {/if}>{$title}</li>
                {/foreach}

            </ul>

            <div class="layui-tab-content layui-col-space15" style="margin-left: 20px">
                {if !empty($info) }
                {foreach $info as $key => $item}
                <div class="layui-tab-item  {if $key eq 1} layui-show {/if} item-title">
                    <ul>
                        {foreach $item as $k=> $val}

                        {if $val.pid == 0}
                        <li><a href="#section_{$val.id}"><h4>{$val.title}</h4></a></li>
                        {else /}
                        <li><a href="#section_{$val.id}" ><h4>&nbsp&nbsp&nbsp&nbsp&nbsp{$val.title}</h4></a></li>
                        {/if}
                        {/foreach}
                    </ul>
                    <hr>
                    {foreach $item as $k=> $val}
                    <div class="left-info" >
                        <h3 id="section_{$val.id}">{$val.title}</h3>
                        <div style="padding-top:20px" class="answer-info">
                            {:json_decode($val.content)}

                        </div>
                    </div>
                    {/foreach}
                </div>
                {/foreach}
                {/if}
            </div>
        </div>
    </div>
    <div class="layui-col-sm7 code-area " id="index-right">

        <div class=""> </div>
        <div class="layui-tab layui-tab-brief "  lay-filter="test-hash">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="21">代码文件</li>
                <li lay-id="22">命令行</li>
                <li lay-id="33"> 商城前台 </li>
                <li lay-id="44"> 商城后台 </li>
                <li lay-id="55"> 9610出口 </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div>
                        <textarea id="code-input" class="code-editor"></textarea>
                    </div>
                    <div>
                        {if !empty($info) }
                        {foreach $info[2] as  $key => $item}
                        <button id="highlight-button" class="highlight-button" answer-id="{$item.id}"  employ-id="{$employ.id}" task-id="{$task_id}">答案{$key + 1}运行验证</button>
                        {/foreach}
                        {/if}
                    </div>
                    <div class="code-display">
                        <pre><code id="code-output" class="hljs"></code></pre>
                    </div>
                    <div id="cmdShow" style="height: 4px;background-color: green;cursor: ns-resize;">
                    </div>
                </div>
                <div class="layui-tab-item"><div id="terminal"></div></div>
                <div class="layui-tab-item">
                    {:htmlspecialchars_decode($content_shop)}
                </div>
                <div class="layui-tab-item">
                    {:htmlspecialchars_decode($content_system)}
                </div>
                <div class="layui-tab-item">
                    {:htmlspecialchars_decode($content_export_declaration)}
                </div>
            </div>
        </div>
    </div>
</div>


<script src="__ROOT__/static/plugs/layui/layui.js"></script>
<script src="__ROOT__/static/plugs/web_edit/js/jquery.min.js"></script>
<script src="__ROOT__/static/plugs/web_edit/js/codemirror.js"></script>
<script src="__ROOT__/static/plugs/web_edit/js/javascript.min.js"></script>
<script src="__ROOT__/static/plugs/web_edit/js/highlight.min.js"></script>

<script src="/node_modules/xterm/lib/xterm.js"></script>
<script src="/node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
<script src="__ROOT__/static/plugs/web_edit/js/xshell.js?at={:date('md')}"></script>
<script>

    if ({$is_over}) {
        layer.msg('实战完毕', {icon:  1}, function () {
            //window.location.href = "{:url('/index')}";
        });
    }


    // 获得tittle的高度
    var all_height = window.innerHeight;
    var body_top   = document.getElementById("body-top").offsetHeight;

    function aaa (url) {

        window.location.href = url;
    }
    //
    $(document).ready(function() {
        // 初始化编辑器
        var editor = CodeMirror.fromTextArea(document.getElementById('code-input'), {
            lineNumbers: true,
            mode: "javascript",
            theme: "monokai",
        });

        // 初始化高度
        $('.code-area').css('height',(all_height - body_top)+'px');
        $('#index-left').css('height',(all_height - body_top)+'px');
        // 初始化宽度
        $('#cmdShow').css('width',$('.code-area').css('width'));
        // 点击按钮事件
        $('.highlight-button').click(function() {

            let code = editor.getValue();
            let employ_id = $(this).attr('employ-id');
            let answer_id = $(this).attr('answer-id');
            let task_id = $(this).attr('task-id');

            let result = '';
            let next = false;
            $.ajax({
                type:'post',
                url: "{:sysuri('activeCode')}",
                data:{code : code, employ_id:employ_id, answer_id:answer_id, task_id:task_id},
                success:function (res) {

                    result = res.data['show_msg'];
                    next   = res.data['next'];
                    layer.msg(res.data['layer_msg'], {icon: res.code == 1 ? 1 : 2}, function () {
                        if (next  == 1) {

                            window.location.href = "{:url('index')}?employ_id={$employ.id}&task_id={$task_id}";
                        }
                    });

                },
                async:false
            })

            $('#code-output').text(result);
            //hljs.highlightAll();
        });

        /** ajax
         *  发送 ajax 获得执行结果
         */
        function sendAjax (data)
        {
            $.ajax({
                type:'post',
                url: "{:sysuri('activeCode')}",
                data:{code : data},
                success:function (res) {
                    console.log(res)
                    return res.data;
                },
                async:false
            })
        }

        //监控chatFrame 的位置
        setMoveStyle()
        var open_index = '';
        layui.util.on('lay-on', {
            'test-offset-l': function () {
                open_index = layer.open({
                    type: 2,
                    offset: 'l',
                    anim: 'slideRight', // 从左往右
                    area: ['320px', '100%'],
                    shade: 0.1,
                    shadeClose: true,
                    id: 'ID-demo-layer-direction-l',
                    content: "{:sysuri('getTaskList')}?employ_id={$employ.id}&task_id={$task_id}"
                });
            },
            'open-window': function () {
                //data-url

                layer.close(open_index);

                console.log(this);
                console.log($(this));
                //let data-url
                //window.location.href = "http://example.com";
            }
        })



        var is_first_terminal = true;
        layui.use(['element'], function () {
            let element = layui.element; 
            // tab 切换事件
            element.on('tab(test-hash)', function(data){
                let tab_id = data.id;
                if(tab_id == 22){
                    if(is_first_terminal){
                        is_first_terminal = false;
                        // 初始化websocket
                        sock_obj.initSocket();
                    }
                }
            });
        })
    });

    // 监听页面尺寸变化
    window.onresize = function() {
        setMoveStyle()
    }
    // 动态更改 chatFrame 的位置
    function setMoveStyle() {
        var index_left_width   = document.getElementById("index-left").offsetWidth;

        $('#chatFrame').css('left', (index_left_width - 4) +'px');
        $('#chatFrame').css('height',$('.code-area').css('height'));
        $('#chatFrame').css('top', $('#body-top').css('height'));
        $('#cmdShow').css('width',$('.code-area').css('width'));
    }

    // 中间箭头点击事件
    // move左右平宽度滑动切换
    let div = document.getElementById("chatFrame");

    // 鼠标按下事件
    div.onmousedown = function(event) {

        let isDragging = false; // 用于标识是否正在拖拽

        if (div.setCapture !== undefined) {
            div.setCapture();
        }

        let disX = event.clientX - div.offsetLeft;

        // 鼠标移动事件
        document.onmousemove = function(event) {
            isDragging = true; // 如果发生了移动，认为发生了拖拽
            // 获得可视区域的宽度
            let width = window.innerWidth
            // 距离左侧边框的距离
            let x = event.clientX - disX ;

            if ( (width-x) < 500 ) return false;

            if ( x < 200 ) {
                x = 0;
                $('.move-left').css('display','none');
                $('.move-right').css('display','block');
            } else {
                $('.move-left').css('display','block');
                $('.move-right').css('display','none');
            }

            $('#index-left').css('width', (x+4) + 'px');
            $('#index-right').css('width', (width - x-4) + 'px');
            $('#cmdShow').css('width',$('.code-area').css('width'));
            div.style.left = x + 'px';
        };

        // 鼠标抬起事件
        document.onmouseup = function() {
            if (div.releaseCapture !== undefined) {
                div.releaseCapture();
            }

            document.onmousemove = null;
        };

        return false; // 阻止默认行为
    };

    let old_div_width = document.getElementById("index-left").offsetWidth;


    $('.move-left').click(function () {

        $('.move-left').css('display','none');
        $('.move-right').css('display','block');


        // 获得可视区域的宽度
        let width = window.innerWidth
        $('#index-left').css('width', 4 + 'px');
        $('#index-left').css('display', 'none');
        $('#index-right').css('width', (width-4) + 'px');
        $('#cmdShow').css('width',$('.code-area').css('width'));
        div.style.left = 0 + 'px';

    });

    $('.move-right').click(function () {

        $('.move-left').css('display','block');
        $('.move-right').css('display','none');

        // 获得可视区域的宽度
        let width = window.innerWidth;

        $('#index-left').css('width', old_div_width + 'px');
        $('#index-left').css('display', 'block');
        $('#index-right').css('width', (width - old_div_width) + 'px');
        $('#cmdShow').css('width',$('.code-area').css('width'));
        div.style.left = (old_div_width -4) + 'px';
    });


    let cmd = document.getElementById("cmdShow");

    // 鼠标按下事件
    cmd.onmousedown = function(event) {

        let isDragging = false; // 用于标识是否正在拖拽

        if (cmd.setCapture !== undefined) {
            cmd.setCapture();
        }

        let disY = event.clientY - cmd.offsetTop;

        // 鼠标移动事件
        document.onmousemove = function(event) {
            isDragging = true; // 如果发生了移动，认为发生了拖拽
            // 距离左侧边框的距离
            let y = event.clientY - disY ;

            cmd.style.top = y + 'px';

            let code_edit_height = document.getElementById('code-edit').offsetHeight

            $('.CodeMirror').css('height', (y - code_edit_height - 25) + 'px');
        };

        // 鼠标抬起事件
        document.onmouseup = function() {
            if (cmd.releaseCapture !== undefined) {
                cmd.releaseCapture();
            }
            document.onmousemove = null;
        };

        return false; // 阻止默认行为
    };

    var old_index_left = $('#index-left').css('width');
    // 最大化
    function toMax() {

        old_index_left = $('#index-left').css('width');

        // 获得可视区域的宽度
        let width = window.innerWidth

        $('#index-left').css('width', width);
        $('#index-right').css('display', 'none');

        $('#chatFrame').css('display', 'none');
        $('#cmdShow').css('display', 'none');

        $('#to-max').css('display', 'none');
        $('#to-min').css('display', 'block');
    }

    // 还原
    function toMin() {

        $('#index-left').css('width', old_index_left);
        $('#index-right').css('display', 'block');

        $('#to-max').css('display', 'block');
        $('#to-min').css('display', 'none');

        $('#chatFrame').css('display', 'block');
        $('#cmdShow').css('display', 'block');

    }


</script>


</body>
</html>